<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <style>
        .box{
            width:170px;
            
            background: darkcyan;
            padding:30px;
        }
        table{
            border:1px solid #000;
        }
        td{ 
            border:1px solid #000;
            padding:10px;
            text-align: center;
        }
        ul{
            list-style: none;
            display: flex;
            margin:0;
            padding:0;
        }
        li{
            width:200px;
            background: pink;
        }

        .zoom-enter-active{
            animation: zoomInDown .9s;
        }

        .zoom-leave-active{
            animation: zoomOutDown .9s;
        }

        .box{
            width:50%;
            min-height:300px;
            border:1px solid #999;
            border-radius: 10px;

        }
        .router-link-exact-active, .router-link-active{
            font-size: 30px;
            font-weight: bold;
            color:#f50;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        
        <!-- 5, 路由出口 路由匹配到的组件将渲染在这里  -->
        <router-view class="box"></router-view>
        
        <!-- 6 路由跳转 声明式 -->
       
    </div>


    <template id="main">
        <div>
            <h2>main - 微信的主路由 </h2>
            <hr>
            <router-view></router-view>
            <hr>
            <myfoot></myfoot>
        </div>
    </template>

    <template id="wechat">
        <div>
            <h2>wechat - 微信-1  </h2>
        </div>
    </template>
    <template id="contact">
        <div>
            <h2>contact - 通讯录-2  </h2>
            <div>
                <p v-for="(l,i) in players" :key="i">
                    <router-link :to="{name:'detail',params:{id:l.id},query:l}">{{l.name}}</router-link>
                </p>
            </div>
        </div>
    </template>
    <template id="find">
        <div>
            <h2>Find  - 朋友圈 </h2>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>mine - 个人中心 </h2>
        </div>
    </template>
    <template id="notfound">
        <div>
            <h2>404 - 404 - NotFOund </h2>
        </div>
    </template>

    <template id="myfoot">
        <footer>
            <router-link v-for="(l,i) in flist" :key="i" :to="{name:l.name}">
                {{l.title}}
            </router-link>
        </footer>
    </template>

    <template id="detail">
        <div>
            <h2>歌手 详情  - <button @click="$router.go(-1)">返回</button></h2>
            <h2>id --- {{$route.params.id }}</h2>
            <h2>name -- {{$route.query.name }}</h2>
            <img :src="$route.query.picUrl" width="300" height="300" alt="">
        </div>
    </template>
    <script>
        Vue.component('myhead',{
            template:"<h2>Head - wh2114-daydayup</h2>"
        })
        Vue.component("myfoot",{
            template:"#myfoot",
            data(){
                return {
                    flist:[
                        {   path:"/main/wechat",name:"wechat",icon:"",title:"微信" },
                        {   path:"/main/contact",name:"contact",icon:"",title:"通讯录" },
                        {   path:"/main/find",name:"find",icon:"",title:"朋友圈" },
                        {   path:"/main/mine",name:"mine",icon:"",title:"我的"},
                    ]
                }
            }
        })
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)  (脚手架)

        // 1. 定义路由组件.
        const Main = {
            template:"#main"
        }
        const Wechat = {
            template:"#wechat",
            mounted(){},
            methods:{},
            beforeRouteEnter(to,from,next){
                console.log("beforeRouteEnter")
                console.log(this)  // 此时没有进入当前路由 所以不能调用this 
                next()
            },
            beforeRouteUpdate(to,from,next){
                console.log("beforeRouteUpdate")
                next()
            },
            beforeRouteLeave(to,from,next){
                console.log("beforeRouteUpdate")
                if(window.confirm("请,你真的要离开我们吗?")){
                    next()
                }else{
                    next(false)
                }
            },
        }
        const Contact = {
            template:"#contact",
            data(){
                return {
                    players:[]
                }
            },
            mounted(){
                $.ajax({
                    url:"http://47.104.209.44:3333/artist/list",
                    type:"GET",
                    success:res=>{
                        console.log(res)
                        this.players = res.artists
                    }
                })
            }
        }
        const Find = {
            template:"#find"
        }
        const Mine = {
            template:"#mine"
        }
        const Notfound = {
            template:"#notfound"
        }
        const Detail = {
            template:"#detail"
        }
        // 2. 定义一些路由
        // 每个路由都需要映射到一个组件。
        const routes = [
            {
                path:"/",
                redirect:"/main"
            },
            {
                path:"/main",
                name:"main",
                redirect:"/main/wechat",
                component:Main,
                children:[   // 子路由  对应一个 router-view  (children 属于哪个组件  router-view 就写在哪个组件内部 )
                    {   path:"/main/wechat",name:"wechat",component:Wechat },
                    {   path:"/main/contact",name:"contact",component:Contact },
                    {   
                        path:"/main/find",
                        name:"find",
                        component:Find,
                        beforeEnter:(to,from,next)=>{
                            if(window.confirm('你知道要进入我的朋友圈查看吗?')){
                                next()
                            }else{
                                next(false)
                            }
                        }
                    },
                    {   path:"/main/mine",name:"mine",component:Mine },
                ]
            },
            {
                path:"/404",
                name:"notFound",
                component:Notfound
            },
            {
                path:"/detail/:id",
                name:'detail',
                component:Detail
            },
            {
                path:'*',
                redirect:"/404"
            }
        ]

        // 3. 创建路由实例并传递 `routes` 配置  你可以在这里输入更多的配置
        // # 表示 hash 路由 
        const router = new VueRouter({
            routes,
            mode:"hash"
        })

        // 全局守卫
        router.beforeEach((to,from,next)=>{
            // 判断是否登录是否可以进入某个路由
            console.log("beforeEach - 路由全局前置守卫")
            console.log(to)
            console.log(from)
            next()
        })

        router.afterEach((to,from)=>{
            console.log("afterEach == " + to.name )
        })

        
        // 4. 路由挂载到根实例
        const vm = new Vue({
            router, // this.$router
            data:{
                title:"Vue 路由初步 - 微信App嵌套路由",
            },
            components:{
               
            },
            watch:{
                '$route':function(to,from){
                    // console.log(to)
                    // console.log(from)
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
                
                console.log(this.$router) // 路由对象  负责路由跳转 路由导航和路由全局监听
                console.log(this.$route)  // 路由信息对象  当前激活的路由对象  路由参数 query(?)&params(:)  

            }
        }).$mount("#app")


    </script>
    <!-- 
        嵌套路由  路由嵌套组件  
        你有多少层嵌套就写多少个 router-view     

        配置简单 路由     

        路由守卫   阻止你进入或者离开当前路由 

        用来判断时候可以进入或者离开当前路由  

        路由导航守卫    分三种   
        a.  全局前置守卫  router.beforeEach(to,from,next)
            全局后置守卫  router.afterEach(to,from)

        b.  路由独享的守卫  beforeEnter(to,from,next)  进入当前路由之前触发 

        c.  路由组件内直接定义以下路由导航守卫  component
            beforeRouteEnter    进入这个组件之前
            beforeRouteUpdate   组件数据更新  
            beforeRouteLeave    离开这个组件之前  
     -->
</body>
</html>